<template>
  <div class="app-container">
    <div v-if="inputStatus == 2" class="dmcont">
      <ul class="tabTitle">
        <li v-if="fistOne">首次配置</li>
        <li v-else>已配置</li>
        <el-button
          v-if="isShow"
          type="primary"
          plain
          class="dialog-footer2"
          @click="gotoedit"
          >编辑</el-button
        >
        <el-button
          v-if="gototryBoolen"
          type="primary"
          plain
          class="dialog-footer2"
          @click="gototry"
          >测试</el-button
        >
        <el-button
          v-if="preserBoolen"
          class="dialog-footer"
          type="primary"
          @click="preservation"
          >保存</el-button
        >
      </ul>
      <div class="essentialinfor formcolumn">
        <el-form ref="formOne" :model="formList" :inline="true">
          <el-form-item
            prop="dataSourceName"
            v-for="(item, index) in reqformList"
            :key="index"
            :style="{ width: '47%' }"
          >
            <el-input
              v-model="item.value"
              controls-position="right"
              :disabled="disabled"
              :style="{ width: '100%' }"
              @input="fistChange"
            >
              <template slot="prepend">{{ item.fieldName }}</template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="链接Url" prop="url" >
            <el-input
              v-model="form.url"
              controls-position="right"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="用户名" prop="userName" >
            <el-input v-model="form.userName" :disabled="disabled" />
          </el-form-item>
          <el-form-item label="密码" prop="password" >
            <el-input
              type="password"
              v-model="form.password"
              :disabled="disabled"
            />
          </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div v-else>
      <ul class="tabTitle">
        <li>基本信息</li>
        <el-button
          v-if="inputStatus == 0"
          type="primary"
          class="dialog-footer"
          @click="goback"
          >返回</el-button
        >
        <el-button
          v-else
          class="dialog-footer"
          type="primary"
          @click="preservation"
          >保存</el-button
        >
      </ul>
      <div>
        <div class="essentialinfor viewformcolumn">
          <el-form ref="formTwo" :rules="rules" :model="form" :inline="true">
            <el-form-item
              prop="dataSourceName"
              required
              :style="{ width: '96%' }"
            >
              <el-input
                v-model="form.dataSourceName"
                :disabled="inputStatus == 1 ? false : true"
                :style="{ width: '100%' }"
              >
                <template slot="prepend">数据源名</template>
              </el-input>
            </el-form-item>
            <el-form-item :style="{ width: '47%' }" class="fromList2">
              <el-input
                v-model="form.imageUrl"
                :disabled="inputStatus == 1 ? false : true"
                :style="{ width: '100%' }"
              >
                <template slot="prepend">图标</template>
              </el-input>
            </el-form-item>
            <el-form-item :style="{ width: '47%' }" class="fromList2">
              <el-input
                v-model="form.pluginUrl"
                :disabled="inputStatus == 1 ? false : true"
                :style="{ width: '100%' }"
                ><template slot="prepend">插件</template>
              </el-input>
            </el-form-item>
            <el-form-item
              prop="dataSourceComment"
              :style="{ width: '96%' }"
              class="fromList3"
            >
              <el-input>
                <template slot="prepend">描述</template>
                <template slot="append">
                  <el-input
                    v-model="form.dataSourceComment"
                    type="textarea"
                    :autosize="{ minRows: 14, maxRows: 14 }"
                    :disabled="inputStatus == 1 ? false : true"
                  >
                  </el-input>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  edit,
  config,
  getDataSourceConfigList,
  testConnection,
} from "@/api/metadata/datasource";
export default {
  data() {
    return {
      // 表单参数
      form: {}, //图表的信息,
      //动态表格
      formList: {},
      //选项
      checkedout: "0",
      //表格数据
      postList: [],
      //基本信息的表内容
      // queryParams: {
      //     dataSourceName:'',//数据源名
      //     imageUrl:'',//图标url
      //     dataSourceComment:'',//描述
      //     pluginUrl:'',//插件URL
      //     creationTime:'',//创建时间
      //     dataSourceId:'',//数据源主键id
      //     isDel:'',//逻辑删除
      //     isLock:'',//锁定
      //     password:'',//密码
      //     userName:'',//用户名
      //     url:'',//链接url
      // },
      rules: {
        dataSourceName: [
          {
            required: true,
            message: "数据源名称不能为空",
            required: true,
            trigger: "blur",
          },
        ],
        dataSourceComment: [
          {
            required: true,
            message: "描述不能为空",
            required: true,
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "链接地址不能为空",
            required: true,
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "用户名不能为空",
            required: true,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            required: true,
            trigger: "blur",
          },
        ],
      },
      inputStatus: "", //0-查看详情  1--编辑 2--配置
      //第一个表单
      formOne: {},
      //第二个表单
      formTwo: {},
      //请求回来的form的值
      reqformList: [],
      isShow: true,
      gototryBoolen: false,
      preserBoolen: false,
      //是否可输入 true---不能输入 false--可以输入
      disabled: true,
      //第一次的配置
      fistOne: false, //true是第一次配置 false 不是第一次配置
      //校验
      reqformBlooen: false,
    };
  },
  mounted() {
    let info = localStorage.getItem("info");
    this.form = JSON.parse(info);
    this.inputStatus = localStorage.getItem("status");
    if (this.form.isConfig == 0) {
      this.fistOne = true;
      //关闭编辑
      this.isShow = false;
      //打开测试
      this.gototryBoolen = true;
      this.disabled = false;
    } else {
      this.disabled = true;
    }
    //如果是第一次一进来先去判断是否是第一次配置
    this.fistConfigure();
  },
  methods: {
    fistChange() {
      if (this.reqformList) {
        this.gototryBoolen = true;
        this.preserBoolen = false;
      }
    },
    fistConfigure() {
      let querFist = {
        dataSourceId: this.form.dataSourceId,
      };
      getDataSourceConfigList(querFist)
        .then((response) => {
          //重置表单
          this.resetForm("formOne");
          this.reqformList = response.data;
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    changePage(index) {
      this.activeIndex = index;
    },
    //返回
    goback() {
      this.$router.go(-1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //请求接口
    getList() {},
    //保存--修改数据源
    preservation() {
      if (this.fistOne) {
        config(this.form)
          .then((response) => {
            if (response.success) {
              this.$modal.msgSuccess("配置成功");
              this.$router.go(-1);
            }
          })
          .catch((err) => {
            // this.$message.error(err.message);
            console.log(err);
          });
      } else {
        edit(this.form)
          .then((response) => {
            if (response.success) {
              this.$modal.msgSuccess("修改成功");
              this.$router.go(-1);
            }
          })
          .catch((err) => {
            // this.$message.error(err.message);
            console.log(err);
          });
      }
    },
    //去编辑
    gotoedit() {
      this.disabled = false;
      this.isShow = false;
      this.gototryBoolen = true;
    },
    //测试
    gototry() {
      this.reqformList.forEach((item) => {
        if (item.value == "") {
          this.$message.error(item.fieldName + "不能为空");
          this.reqformBlooen = false;
        } else {
          this.reqformBlooen = true;
        }
      });
      if (this.reqformBlooen) {
        let queryText = {};

        this.reqformList.forEach((item) => {
          if (item.engName == "dataSourceName") {
            queryText.dataSourceName = item.value;
            this.form.dataSourceName = item.value;
          } else if (item.engName == "password") {
            queryText.password = item.value;
            this.form.password = item.value;
          } else if (item.engName == "url") {
            queryText.url = item.value;
            this.form.url = item.value;
          } else if (item.engName == "userName") {
            queryText.userName = item.value;
            this.form.userName = item.value;
          }
        });

        testConnection(queryText)
          .then((response) => {
            if (response.success) {
              this.$modal.msgSuccess("测试成功");
              this.gototryBoolen = false;
              this.preserBoolen = true;
            }
          })
          .catch((err) => {
            // this.$message.error(err.message);
            console.log(err);
          });
      }
    },
    // 表单重置
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-container {
  height: 755px;
  .tabTitle {
    font-size: 18px;
    list-style: none;
    height: 90px;
    padding: 30px 0;
    margin: 0 35px;
    border-bottom: 1px solid rgb(221, 218, 218);
    li {
      float: left;
      line-height: 50px;
      text-align: center;
      border-radius: 5px;
      color: #919cb1;
    }
    .el-button {
      width: 120px;
      height: 40px;
      font-size: 16px;
    }
  }
  .dialog-footer {
    float: right;
     width: 140px;
      height: 40px;
      border-radius: 4px;
      padding: 7px 20px;
      font-size: 16px;
      background-color: $labelColor;
  }
  .dialog-footer2{
     float: right;
     width: 140px;
      height: 40px;
      border-radius: 4px;
      padding: 7px 20px;
      font-size: 16px;
      background-color: #e4ecf8;
      border: 1px solid $labelColor;
      color: $labelColor;
  }
  .el-form-item {
    margin: 30px 0 0 32px;
  }
}
</style>
<style scoped>
/deep/ .formcolumn .el-input-group__prepend {
  width: 100px;
}
/deep/ .formcolumn .el-input__inner {
  height: 80px !important;
}
/deep/ .formcolumn .el-form-item--medium .el-form-item__content {
  width: 100%;
}
/deep/ .viewformcolumn .el-input-group__prepend {
  width: 100px;
}

/deep/ .viewformcolumn .el-form-item--medium .el-form-item__content {
  width: 100%;
}

/deep/ .viewformcolumn .el-input__inner {
  height: 80px;
}
/deep/ .viewformcolumn .fromList3 .el-input__inner {
  display: none;
}
/deep/ .viewformcolumn .fromList3 .el-input-group__prepend {
  width: 100px;
}
/deep/ .viewformcolumn .fromList3 .el-input-group__append {
  width: calc(100% - 100px) !important;
  padding: 0;
  border-left: 1px solid #e4e7ed;
}
/deep/ .viewformcolumn .fromList3 .el-textarea__inner {
  border: none;
}
</style>
